// 1、导入 racet 核心依赖
import React from 'react'
import ReactDOM from 'react-dom/client'

//2、创建项目根的实例：ReactDOM.createRoot（spa应用跟组件挂载点元素 dom对象）
const root = ReactDOM.createRoot(document.getElementById('root'))
//3、使用root 根实例 绘制用户界面（视图html）
/*
如何创建react 的html 元素？
React.createElement('html元素标签名', { 属性名1: 属性值, 属性名2: 属性值2。。。 }，子元素1，子元素2.。。)
第三个以后都是子元素
注意：创建元素的css 类名需要使用 =》 className  表示class

*/

/*
  jsx基本使用
  注意：
  1、jsx元素名字都是有效的html元素
  2、添加 类名写成className， label的for 属性携程htmlFor
  3、结构复杂 建议加个 圆括号包裹 const li =（html复杂结构）
  4、根元素  只能有一个 ，类似vue中根节点，解决  用幽灵节点<> html结构</> 
    类似vue中template标签

  
*/



const li = React.createElement('li', {}, '香蕉')
const li1 = React.createElement('li', {}, '句子')
const li2 = React.createElement('li', {}, '苹果')
const ul = React.createElement('ul', { className: 'lss', id: 'demo' }, li, li1, li2)
const box = (
  <div>
    <div>{1}</div>

  </div>
)
let abc = 123
let obj = { name: '小红', age: 18 }
let arr = [1, 2, 3]
let fn = () => {
  console.log(456)
  return 789
}
let fn2 = () => {
  const a = <h1>hi fn2</h1>
  return a
}
const is = false
const loadDing = () => {
  if (is) {
    return <div>数据加载中</div>
  } else {
    return <div>数据加载完成</div>
  }
}

const title = (
  <div>{loadDing()}</div>
)
const songs = [
  { id: 1, name: '痴心绝对' },
  { id: 2, name: '像我这样的人' },
  { id: 3, name: '南山南' }
]
const list = () => {
  const _list = []
  songs.forEach((item) => {
    _list.push(<li key={item.id}>{item.name}</li>)

  })
  return _list

}
const lis = songs.map((item) => <li key={item.id}>{item.name}</li>)
const listA = [
  { id: 1, name: '黑马86期', salary: 11000 },
  { id: 2, name: '黑马87期', salary: 12000 },
  { id: 3, name: '黑马88期', salary: 18000 }
]
const ListA = listA.map(item => <li key={item.id}><h3>班级：{item.name}</h3> <p> 工资：{item.salary}</p></li >)
const div = (
  <>
    <ul>
      {list()}
    </ul>
    <hr />
    <ul>
      {lis}
    </ul>
    <ul>
      {ListA}
    </ul>
  </>
)
root.render(
  // ul,
  // box,
  div
)


